<template>
	<view class="container">
		<status-bar bgColor="#0088ff"></status-bar>
		<!-- 顶部标题栏 -->
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
			</view>
			<view class="nav-title">测量数据</view>
			<view class="more-btn" @click="showActionSheet">
				<text class="dots">⋯</text>
			</view>
		</view>

		<!-- 数据表格 -->
		<scroll-view class="data-table" scroll-y="true">
			<view class="table-row">
				<text class="row-label">产品宽度</text>
				<input v-if="isEditable" class="row-input" v-model="formData.productWidth" placeholder="请输入产品宽度" />
				<text v-else class="row-value">{{formData.productWidth}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">产品高度</text>
				<input v-if="isEditable" class="row-input" v-model="formData.productHeight" placeholder="请输入产品高度" />
				<text v-else class="row-value">{{formData.productHeight}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">窗帘盒宽</text>
				<input v-if="isEditable" class="row-input" v-model="formData.curtainBoxWidth" placeholder="请输入窗帘盒宽" />
				<text v-else class="row-value">{{formData.curtainBoxWidth}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">窗帘盒深</text>
				<input v-if="isEditable" class="row-input" v-model="formData.curtainBoxDepth" placeholder="请输入窗帘盒深" />
				<text v-else class="row-value">{{formData.curtainBoxDepth}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">离地要求</text>
				<input v-if="isEditable" class="row-input" v-model="formData.groundRequirement" placeholder="请输入离地要求" />
				<text v-else class="row-value">{{formData.groundRequirement}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">内开窗上沿到安装位置的距离</text>
				<input v-if="isEditable" class="row-input" v-model="formData.windowDistance" placeholder="请输入距离" />
				<text v-else class="row-value">{{formData.windowDistance}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">房间名称</text>
				<input v-if="isEditable" class="row-input" v-model="formData.roomName" placeholder="请输入房间名称" />
				<text v-else class="row-value">{{formData.roomName}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">安装产品</text>
				<input v-if="isEditable" class="row-input" v-model="formData.installProduct" placeholder="请输入安装产品" />
				<text v-else class="row-value">{{formData.installProduct}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">层数</text>
				<input v-if="isEditable" class="row-input" v-model="formData.layers" placeholder="请输入层数" />
				<text v-else class="row-value">{{formData.layers}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">窗户类型</text>
				<input v-if="isEditable" class="row-input" v-model="formData.windowType" placeholder="请输入窗户类型" />
				<text v-else class="row-value">{{formData.windowType}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">安装面材质</text>
				<input v-if="isEditable" class="row-input" v-model="formData.installMaterial" placeholder="请输入安装面材质" />
				<text v-else class="row-value">{{formData.installMaterial}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">安装方式</text>
				<input v-if="isEditable" class="row-input" v-model="formData.installMethod" placeholder="请输入安装方式" />
				<text v-else class="row-value">{{formData.installMethod}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">驱动方式</text>
				<input v-if="isEditable" class="row-input" v-model="formData.driveMethod" placeholder="请输入驱动方式" />
				<text v-else class="row-value">{{formData.driveMethod}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">开合方式</text>
				<input v-if="isEditable" class="row-input" v-model="formData.openMethod" placeholder="请输入开合方式" />
				<text v-else class="row-value">{{formData.openMethod}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">有无窗缝</text>
				<input v-if="isEditable" class="row-input" v-model="formData.hasWindowGap" placeholder="请输入有无窗缝" />
				<text v-else class="row-value">{{formData.hasWindowGap}}</text>
			</view>

			<view class="table-row">
				<text class="row-label">测量时间</text>
				<input v-if="isEditable" class="row-input" v-model="formData.measureTime" placeholder="请输入测量时间" />
				<text v-else class="row-value">{{formData.measureTime}}</text>
			</view>
		</scroll-view>

		<!-- 保存按钮 -->
		<view class="save-section" v-if="isEditable">
			<button class="save-btn" @click="saveData">保存数据</button>
		</view>

		<!-- 复制成功弹框 -->
		<view class="copy-success-modal" v-if="showCopySuccess">
			<view class="modal-content">
				<view class="success-icon">
					<view class="icon-circle">
						<text class="icon">✓</text>
					</view>
				</view>
				<view class="success-text">复制成功，请完善复制成功的测量数据</view>
				<button class="confirm-btn" @click="goToEdit">去完善数据</button>
			</view>
			<view class="modal-mask" @click="hideCopySuccess"></view>
		</view>

		<!-- 操作菜单弹框 -->
		<view class="action-sheet" v-if="showActions">
			<view class="action-mask" @click="hideActionSheet"></view>
			<view class="action-content">
				<view class="action-item" @click="editData">
					<text>编辑数据</text>
				</view>
				<view class="action-item" @click="deleteData">
					<text>删除数据</text>
				</view>
				<view class="action-item" @click="copyData">
					<text>复制数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showActions: false,
				showCopySuccess: false,
				isEditable: false,
				dataId: null,
				formData: {
					productWidth: '300厘米（满墙尺寸）',
					productHeight: '286厘米（盒顶到地面）',
					curtainBoxWidth: '20厘米',
					curtainBoxDepth: '20厘米',
					groundRequirement: '客户要求',
					windowDistance: '21厘米',
					roomName: '客厅',
					installProduct: '直轨',
					layers: '单层',
					windowType: '落地窗',
					installMaterial: '瓷砖',
					installMethod: '顶装（无石膏线）',
					driveMethod: '手动',
					openMethod: '双开',
					hasWindowGap: '无',
					measureTime: '2025-05-30 13:54'
				}
			}
		},
		onLoad(options) {
			// 获取页面参数，判断是否为编辑模式
			if (options.id) {
				this.dataId = options.id;
				this.isEditable = false; // 查看详情默认不可编辑
			} else {
				this.isEditable = true; // 添加数据默认可编辑
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			showActionSheet() {
				this.showActions = true
			},
			hideActionSheet() {
				this.showActions = false
			},
			editData() {
				this.hideActionSheet()
				this.isEditable = true
			},
			deleteData() {
				this.hideActionSheet()
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条测量数据吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					}
				})
			},
			copyData() {
				this.hideActionSheet()
				this.showCopySuccess = true
			},
			hideCopySuccess() {
				this.showCopySuccess = false
			},
			goToEdit() {
				this.hideCopySuccess()
				// 跳转到编辑页面
			},
			saveData() {
				// 保存数据逻辑
				uni.showLoading({
					title: '保存中...'
				})
				
				// 模拟保存请求
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					this.isEditable = false
				}, 1000)
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #0088ff;
		color: #fff;
		padding: 0 30rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon-img {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.more-btn {
		width: 60rpx;
		text-align: right;
		margin-right: 30rpx;
	}

	.dots {
		font-size: 40rpx;
		font-weight: bold;
	}

	.data-table {
		padding: 24rpx 0;
		/* height: calc(100vh - 90rpx); */
	}

	.table-row {
		display: flex;
		padding: 0;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.row-label {
		width: 33%;
		font-size: 28rpx;
		color: #666;
		padding: 24rpx 20rpx 24rpx 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.row-label::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 1rpx;
		background-color: #f0f0f0;
	}

	.row-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		padding: 24rpx 20rpx 24rpx 32rpx;
	}

	.row-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding: 24rpx 20rpx 24rpx 32rpx;
		border: none;
		background-color: transparent;
	}

	.row-input::placeholder {
		color: #999;
	}

	.save-section {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.save-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0088ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		border: none;
		text-align: center;
	}

	.save-btn:active {
		background-color: #0066cc;
	}

	.action-sheet {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}

	.action-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
	}

	.action-content {
		position: absolute;
		top: 140rpx;
		right: 20rpx;
		width: 180rpx;
		background-color: #e6e6e6;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
		overflow: hidden;
	}

	.action-item {
		padding: 24rpx 32rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #e6e6e6;
		border-bottom: 1rpx solid #d0d0d0;
	}

	.action-item:last-child {
		border-bottom: none;
	}

	.action-item:active {
		background-color: #d9d9d9;
	}
	.copy-success-modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 100;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.modal-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	}
	
	.modal-content {
	  width: 560rpx;
	  background-color: #fff;
	  border-radius: 30rpx;
	  padding: 40rpx;
	  z-index: 101;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.success-icon {
	  margin-bottom: 30rpx;
	}
	
	.icon-circle {
	  width: 100rpx;
	  height: 100rpx;
	  background-color: #0088ff;
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.icon {
	  color: #fff;
	  font-size: 50rpx;
	  font-weight: bold;
	}
	
	.success-text {
	  font-size: 32rpx;
	  color: #333;
	  text-align: left;
	  margin-bottom: 40rpx;
	}
	
	.confirm-btn {
	  width: 100%;
	  height: 80rpx;
	  line-height: 80rpx;
	  background-color: #0088ff;
	  color: #fff;
	  font-size: 32rpx;
	  border-radius: 40rpx;
	  border: none;
	}
</style>